<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { WebGLUtils } from '@/utils/webgl'

const demoCanvas = ref<HTMLCanvasElement | null>(null)
const gl = ref<WebGLRenderingContext | null>(null)
const webglUtils = ref<WebGLUtils | null>(null)

// 顶点着色器源码
const vertexShaderSource = `
  attribute vec4 a_Position;
  void main() {
    gl_Position = a_Position;
  }
`

// 片元着色器源码
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0);
  }
`

onMounted(() => {
  if (!demoCanvas.value) return

  // 获取WebGL上下文
  gl.value = demoCanvas.value.getContext('webgl')
  if (!gl.value) return

  // 创建WebGL工具实例
  webglUtils.value = new WebGLUtils(gl.value)

  // 创建着色器和程序
  const vertexShader = webglUtils.value.createShader(gl.value.VERTEX_SHADER, vertexShaderSource)
  const fragmentShader = webglUtils.value.createShader(gl.value.FRAGMENT_SHADER, fragmentShaderSource)
  if (!vertexShader || !fragmentShader) return

  const program = webglUtils.value.createProgram(vertexShader, fragmentShader)
  if (!program) return

  gl.value.useProgram(program)

  // 设置清除颜色并清除
  gl.value.clearColor(0.0, 0.0, 0.0, 0.0)
  gl.value.clear(gl.value.COLOR_BUFFER_BIT)
})
</script>

<template>
  <div class="matrix-3d">
    <h1>3D矩阵变换</h1>
    <p>使用WebGL实现三维图形的矩阵变换，包括平移、旋转和缩放等基本变换操作。</p>

    <el-card class="demo-section">
      <template #header>
        <div class="card-header">
          <h3>3D变换示例</h3>
        </div>
      </template>
      <div class="demo-content">
        <canvas ref="demoCanvas" width="400" height="400"></canvas>
        <div class="controls">
          <!-- 3D变换控制器将在后续实现 -->
        </div>
      </div>
    </el-card>

    <el-card class="code-section">
      <template #header>
        <div class="card-header">
          <h3>示例代码</h3>
        </div>
      </template>
      <div class="code-content">
        <pre><code>
// 顶点着色器
attribute vec4 a_Position;
void main() {
  gl_Position = a_Position;
}

// 片元着色器
precision mediump float;
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0);
}
        </code></pre>
      </div>
    </el-card>

    <el-card class="info-section">
      <template #header>
        <div class="card-header">
          <h3>实现说明</h3>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="基本原理">
          使用4x4矩阵实现三维空间中的图形变换
        </el-descriptions-item>
        <el-descriptions-item label="变换类型">
          支持平移、旋转、缩放等基本3D变换操作
        </el-descriptions-item>
        <el-descriptions-item label="交互方式">
          通过控制面板调整变换参数，实时预览效果
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<style scoped>
.matrix-3d {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
}

.demo-section {
  margin: 30px 0;
}

.info-section {
  margin: 30px 0;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

.demo-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

canvas {
  border: 1px solid #dcdfe6;
  background-color: #000;
}

.controls {
  flex: 1;
}

.code-content {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

code {
  font-family: monospace;
  color: #409EFF;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}
</style>
